<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-width="300px">
      <div class="title">冷冻运费设置</div>
      <el-row>
        <el-col :span="4">
            <el-input v-model="dataForm.grammage"/>
        </el-col>
        <el-col :span='3'>
          克以内
        </el-col>
        <el-col :span="4">
          <el-input v-model="dataForm.postage"/>
        </el-col>
        <el-col :span='3'>
          港币
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='2'>
          每增加
        </el-col>
        <el-col :span="4">
            <el-input v-model="dataForm.addGrammage"/>
        </el-col>
        <el-col :span='4'>
          克，增加运费
        </el-col>
        <el-col :span="4">
            <el-input v-model="dataForm.addPostage"/>
        </el-col>
         <el-col :span='2'>
          港币
        </el-col>
      </el-row>
      <div class="line"></div>
      <div class="title">非冷冻运费设置</div>
      <el-row>
        <el-col :span="4">
            <el-input v-model="dataForm.fgrammage"/>
        </el-col>
        <el-col :span='3'>
          克以内
        </el-col>
        <el-col :span="4">
          <el-input v-model="dataForm.fpostage"/>
        </el-col>
        <el-col :span='3'>
          港币
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='2'>
          每增加
        </el-col>
        <el-col :span="4">
            <el-input v-model="dataForm.faddGrammage"/>
        </el-col>
        <el-col :span='4'>
          克，增加运费
        </el-col>
        <el-col :span="4">
            <el-input v-model="dataForm.faddPostage"/>
        </el-col>
         <el-col :span='2'>
          港币
        </el-col>
      </el-row>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="update">确定</el-button>
      </el-form-item>
  </el-form></div>
</template>

<script>
import { listExpress, updateExpress } from '@/api/config'

export default {
  name: 'ConfigExpress',
  data() {
    return {
      dataForm: {
        addGrammage: 0,
        addPostage: 0,
        faddGrammage: 0,
        faddPostage: 0,
        fgrammage: 0,
        ftype: 0,
        fid: 0,
        grammage: 0,
        id: 0,
        type: 0,
        postage:0,
        fpostage:0
      },
      rules: {
        litemall_express_freight_min: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        litemall_express_freight_value: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init: function() {
      listExpress().then(response => {
        this.dataForm = response.data.data
      })
    },
    cancel() {
      this.init()
    },
    update() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.doUpdate()
      })
    },
    doUpdate() {
      updateExpress(this.dataForm).then(response => {
        this.$notify.success({
          title: '成功',
          message: '运费配置修改成功'
        })
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.data.errmsg
        })
      })
    }
  }
}
</script>
<style scoped>
.app-container{
  width: 800px;
}
.title{
  margin-bottom: 20px;
  font-weight: bold;
}
.line{
  width: 100%;
  height: 1px;
  background: rgb(222,222,222);
  margin:30px 0px;
}
.el-row{
  margin-bottom: 10px;
}
[class*=el-col-]{
  height: 36px;
  line-height: 36px;
  margin: 0px 5px;
}
</style>
